<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">


<h:head>
	<script type="text/javascript"
		src="http://maps.google.com/maps/api/js?sensor=true"></script>
</h:head>
<h:body>

<p:growl id="messages" showDetail="true" />

<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" 
	style="width:600px;height:400px"
	model="#{mapBean.emptyModel}" 
	onPointClick="handlePointClick(event);" 
	widgetVar="map" />
	
<p:dialog widgetVar="dlg" showEffect="fade">
	<h:form prependId="false">
		<h:panelGrid columns="2">
			<h:outputLabel for="title" value="Title:" />
			<p:inputText id="title" value="#{mapBean.title}" />
			
			<f:facet name="footer">
				<p:commandButton value="Add" 
						actionListener="#{mapBean.addMarker}" 
						update=":messages" 
						oncomplete="markerAddComplete()"/>
				<p:commandButton value="Cancel" onclick="return cancel()"/>
			</f:facet>
		</h:panelGrid>
		
		<h:inputHidden id="lat" value="#{mapBean.lat}" />
		<h:inputHidden id="lng" value="#{mapBean.lng}" />
	</h:form>
</p:dialog>

<script type="text/javascript">
    var currentMarker = null;

    function handlePointClick(event) {
        if(currentMarker === null) {
            document.getElementById('lat').value = event.latLng.lat();
            document.getElementById('lng').value = event.latLng.lng();

            currentMarker = new google.maps.Marker({
                position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
            });

            PF('map').addOverlay(currentMarker);

            PF('dlg').show();
        }	
    }

    function markerAddComplete() {
        var title = document.getElementById('title');
        currentMarker.setTitle(title.value);
        title.value = "";

        currentMarker = null;
        PF('dlg').hide();
    }

    function cancel() {
        PF('dlg').hide();
        currentMarker.setMap(null);
        currentMarker = null;

        return false;
    }
</script>
					
					
		

</h:body>
</html>